<!DOCTYPE html>
<html lang="zh-Hans">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>编译中梦见未来</title>
    <link rel="stylesheet" href="模态框效果style.css">
</head>

<body>
    <div class="channel">
        bilibili 编译中梦见未来
    </div>
    <div class="container">
        <!-- 弹出按钮，这里使用a标签，链接地址使用#***模式 -->
        <a class="btn" href="#open-modal">纯CSS模态框</a>
    </div>
    <!-- 这是里弹窗的目标区域。 -->
    <!-- 这里是背景部分，会100%的满屏显示 -->
    <div id="open-modal" class="modal-window">
        <!-- 这里是弹框的主体部分 -->
        <div>
            <!-- 关闭按钮 -->
            <a href="#" class="modal-close">Close</a>
            <!-- 模态框标题 -->
            <h1 class="modal-title">Title</h1>
            <!-- 模态框的正文 -->
            <div class="modal-body">这是一个使用CSS实现的模态框，利用了:target伪元素实现了样式定位</div>
        </div>
    </div>

</body>

</html>